<template>
  <div style="height:100%">
    <breadcrumb :breadList="breadList" :name="name" style="margin-bottom: 12px;">
      <div class="handle-box" slot="handleContent">
        <a-button class="common-btn" @click="leadIn('2')" style="margin-bottom:5px;">批量导入</a-button>
          <!-- <a-button class="editable-add-btn" @click="leadIn('2')" style="margin-bottom:5px;">批量导入</a-button> -->
      </div>
    </breadcrumb>
    <template>
  <div>
    <a-table bordered :dataSource="loadData" :columns="columns" :loading="loading" :pagination="false">
      <template slot="operation" slot-scope="text, record">
        <a-popconfirm
          v-if="loadData.length > 1"
          title="Sure to delete?"
          @confirm="() => onDelete(record.code)">
         <a-button><a-icon type="delete"></a-icon></a-button>
        </a-popconfirm>
       <a-button @click="handleAdd(record.code)" style="margin:0 5px;"><a-icon type="plus"></a-icon></a-button>
      </template>
    </a-table>
  </div>
</template>
  </div>
</template>

<script>
import GlobalHeader from '@/components/GlobalHeader'
import Breadcrumb from '@/components/tools/Breadcrumb'
// import EditableCell from 'ant-design-vue/lib/EditableCell'
export default {
  name: 'AddSupplier',
  components: {
    GlobalHeader,
    Breadcrumb
    // EditableCell
  },
  data () {
    return {
      name: '',
      breadList: [],
      loading: false,
      code: '供应商编号：010-888888',
      queryParam: {},
      loadData: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'code'
        }, {
          title: '设备编码',
          dataIndex: 'equipmentCode'
        }, {
          title: '设备类型',
          dataIndex: 'equipmentType'
        }, {
          title: '设备名称',
          dataIndex: 'equipmentName'
        }, {
          title: '设备品牌',
          dataIndex: 'equipmentBrand'
        },
        {
          title: '设备参数',
          dataIndex: 'equipmentParamer'
        }, {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ]
    }
  },
  created () {
    this.loading = true
    this.getBreadCrumb()
    setTimeout(() => {
      this.getDataList('1')
    }, 1000)
  },
  methods: {
    // 面包屑处理
    getBreadCrumb () {
      this.breadList = []
      this.name = this.$route.name
      this.$route.matched.forEach(item => {
        console.log('1111', item)
        this.breadList.push(item)
      })
    },
    getDataList (code) {
      const data = [
        {
          code: '1',
          equipmentCode: 'FFFFF-GGGG-1111',
          equipmentType: '监理企业',
          equipmentName: '情节保暖一号正式1',
          equipmentBrand: '大洪总1',
          equipmentParamer: '220V'
        }, {
          code: '2',
          equipmentCode: 'FFFFF-GGGG-2222',
          equipmentType: '监理企业',
          equipmentName: '情节保暖一号正式2',
          equipmentBrand: '大洪总2',
          equipmentParamer: '220V'
        }, {
          code: '3',
          equipmentCode: 'FFFFF-GGGG-333',
          equipmentType: '监理企业',
          equipmentName: '情节保暖一号正式3',
          equipmentBrand: '大洪总3',
          equipmentParamer: '220V'
        }, {
          code: '4',
          equipmentCode: 'FFFFF-GGGG-4444',
          equipmentType: '监理企业',
          equipmentName: '情节保暖一号正式4',
          equipmentBrand: '大洪总4',
          equipmentParamer: '220V'
        }, {
          code: '5',
          equipmentCode: 'FFFFF-GGGG-5555',
          equipmentType: '监理企业',
          equipmentName: '情节保暖一号正式5',
          equipmentBrand: '大洪总5',
          equipmentParamer: '220V'
        }, {
          code: '6',
          equipmentCode: 'FFFFF-GGGG-666',
          equipmentType: '监理企业',
          equipmentName: '情节保暖一号正式6',
          equipmentBrand: '大洪总6',
          equipmentParamer: '220V'
        }
      ]
      if (code === '1') {
        this.loadData = data
        setTimeout(() => {
          this.loading = false
        }, 1000)
      } else {
        data.forEach(item => {
          this.loadData.push(item)
        })
        setTimeout(() => {
          this.loading = false
          this.$success({
            title: '导入成功'
          })
        }, 1000)
      }
    },
    leadIn (status) {
      this.loading = true
      this.getDataList(status)
    },
    onDelete (key) {
      const loadData = [...this.loadData]
      this.loadData = loadData.filter(item => item.code !== key)
    },
    handleAdd (key) {
      const { count, loadData } = this
      const newData = loadData.filter(item => item.code === key)[0]
      this.loadData = [...loadData, newData]
      this.count = this.loadData.length + 1
      this.code = this.count
      console.log(newData, count)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
